<template>
  <view class="box">

    <!-- 地图 -->
    <map v-if="repair.status === 2" id="map" :longitude="polyline[0].points[0].longitude"
      :latitude='polyline[0].points[0].latitude' :markers='markers' :polyline='polyline'></map>


    <view class="title">
      房屋详情
    </view>

    <view class="box-cell">
      <u-cell-group :border='false'>
        <u-cell :border='false' :title="repair.houseInfo">
          <view slot='value' class="right">
            <view class="success" v-if="repair.status === 2">
              上门中
            </view>
            <view class="waiting" v-if="repair.status === 1">
              受理中
            </view>
            <view class="ok" v-if="repair.status === 3">
              已完成
            </view>
            <view class="error" v-if="repair.status === 0">
              已取消
            </view>
          </view>
        </u-cell>
      </u-cell-group>
    </view>

    <view class="title">
      报修信息
    </view>



    <view class="box-cell">
      <u-cell-group :border="false">
        <u-cell :border='false'>
          <view slot="title" class="u-slot-title">
            <text class="u-cell-text">维修项目</text>
            <text class="u-cell-text2">{{repair.repairItemName}}</text>
          </view>
        </u-cell>
        <u-cell :border='false'>
          <view slot="title" class="u-slot-title">
            <text class="u-cell-text">手机号码</text>
            <text class="u-cell-text2">{{repair.mobile}}</text>
          </view>
        </u-cell>
        <u-cell :border='false'>
          <view slot="title" class="u-slot-title">
            <text class="u-cell-text">预约日期</text>
            <text class="u-cell-text2">{{repair.appointment}}</text>
          </view>
        </u-cell>
      </u-cell-group>
    </view>



    <view class="wenti">
      <u-cell-group :border='false'>
        <u-cell :border='false' title="问题描述">
        </u-cell>
        <u--textarea disabled placeholder="请填写详细报修内容，有助于工作人员快速帮您解决问题。" border="none" v-model="repair.description">
        </u--textarea>
      </u-cell-group>
    </view>
    <!-- -->
    <view class="wenti">
      <u-cell-group :border='false'>
        <u-cell :border='false' title="问题附件">
        </u-cell>
        <u-upload :deletable='false' :fileList="fileList3" name="3" multiple :maxCount="10" :previewFullImage="true"
          disabled></u-upload>
      </u-cell-group>
    </view>

    <view class="button" v-if="repair.status === 1">
      <view @click="changeData">修改信息</view>
      <text class="xian"></text>
      <view @click="cancelRepair">取消报修</view>
    </view>
    <!-- 是否取消本次报修？ -->
    <u-modal :show="show" showCancelButton @cancel="cancel" @confirm="confirm" ref="uModal" title="是否取消本次报修？"
      :asyncClose="true">
    </u-modal>
  </view>
</template>

<script>
  import {
    getRepairDetail,
    putRepair
  } from '@/api/repair.js'
  export default {
    data() {
      return {
        fileList3: [],
        show: false,

        // 发请求数据
        repair: {
          houseId: null,
          repairItemId: null,
          mobile: null,
          appointment: null,
          description: null,
          attachment: []
        },
        // 我的位置坐标
        // location: {
        //   longitude: 0.0,
        //   latitude: 0.0
        // },
        // 图标
        markers: [],
        // 路线
        polyline: [{
          points: [],
          // 颜色
          color: "#0066ff",
          // 宽度
          width: 10,
          // dottedLine: true,
          arrowLine: true,
          // colorList: true,

        }]
      }
    },
    async onLoad({
      id
    }) {
      // console.log(id)
      this.id = id
      const res = await getRepairDetail(id)
      this.fileList3 = res.data.attachment.map(item => {
        return {
          id: item.id,
          thumb: item.url,
          type: 'image'
        }
      })
      this.repair = res.data
      if (res.data.status !== 2) return
      // 获取地理信息
      uni.getLocation({
        type: 'gcj02',
        isHighAccuracy: true,
        success: (res) => {
          console.log(res)
          // 经纬度
          // this.location = {
          //   longitude: res.longitude,
          //   latitude: res.latitude
          // }
          this.polyline[0].points = [{
              latitude: 39.997761,
              longitude: 116.478935
            },
            {
              latitude: 39.997825,
              longitude: 116.478939
            },
            {
              latitude: 39.998549,
              longitude: 116.478912
            },
            {
              latitude: 39.998555,
              longitude: 116.478998
            },
            {
              latitude: 39.998566,
              longitude: 116.479282
            },
            {
              latitude: 39.998528,
              longitude: 116.479658
            },
            {
              latitude: 39.998453,
              longitude: 116.480151
            },
            {
              latitude: 39.998302,
              longitude: 116.480784
            },
            {
              latitude: 39.998184,
              longitude: 116.481149
            },
            {
              latitude: 39.997997,
              longitude: 116.481573
            },
            {
              latitude: 39.997846,
              longitude: 116.481863
            },
            {
              latitude: 39.997718,
              longitude: 116.482072
            },
            {
              latitude: 39.997718,
              longitude: 116.482362
            },
            {
              latitude: 39.998935,
              longitude: 116.483633
            },
            {
              latitude: 39.998968,
              longitude: 116.48367
            },
            {
              latitude: 39.999861,
              longitude: 116.484648
            }
          ]
          // 图标
          this.markers = [{
              longitude: res.longitude,
              latitude: res.latitude,
              iconPath: '../../static/icon/mine-active.png',
              width: 30,
              height: 30
            },
            {
              latitude: 39.997761,
              longitude: 116.478935,
              iconPath: '../../static/icon/mine-active.png',
              width: 30,
              height: 30
            }
          ]
        },

        fail(err) {
          console.log(err)
        }
      })
    },
    methods: {
      cancelRepair() {
        this.show = true
      },
      async confirm() {
        await putRepair(this.repair.id)
        uni.navigateTo({
          url: '/pkg-repair/repair/repair'
        })
      },
      cancel() {
        this.show = false
      },
      // 修改信息
      changeData() {
        uni.navigateTo({
          url: '/pkg-repair/add-repair/add-repair?id=' + this.id
        })
      }
    },


  }
</script>

<style scoped lang="scss">
  .box {
    height: 100%;
    background-color: #FAFAFA;
    padding-bottom: 200rpx;

    #map {
      height: 440rpx;
      width: 750rpx;
    }

    .title {
      padding: 0 30rpx;
      line-height: 86rpx;
      color: #979797;
      font-size: 24rpx;
    }

    ::v-deep .u-cell__body {
      background: #ffffff;
      height: 102rpx;
      // padding: 0;
      // margin: 0 15px;
      border-bottom: 1px solid #FAFAFA;
    }

    ::v-deep .u-form-item__body {
      background: #fff;
      height: 102rpx;
      padding: 30rpx;
      box-sizing: border-box;
    }

    .wenti {
      border-bottom: 1px solid #FAFAFA;

      ::v-deep .u-cell__body {
        background: #ffffff;
        height: 92rpx;
        // padding: 0;
        // margin: 0 15px;
        border-bottom: unset;
      }

      ::v-deep textarea {
        height: 80rpx !important;
      }

      ::v-deep .u-textarea {
        padding: 30rpx;
        padding-top: unset;
        padding-bottom: unset;
      }

      ::v-deep .u-textarea--disabled {
        background: #ffffff !important;
      }

      // 上传
      ::v-deep .u-upload {
        background: #fff;
        padding: 0 30rpx;
      }
    }

    .popup {
      ::v-deep .u-icon__icon {
        display: none;
      }
    }

    ::v-deep .u-transition {
      .u-popup__content {
        border-radius: 10px;
      }

      .u-toolbar__wrapper__confirm {
        color: #6199b5 !important;
      }
    }

    .right {
      .success {
        width: 104rpx;
        height: 48rpx;
        color: #27AE60;
        border-radius: 10rpx;
        background: #EBF8F0;
        font-size: 24rpx;
        line-height: 48rpx;
        text-align: center;
      }

      .waiting {
        width: 104rpx;
        height: 48rpx;
        border-radius: 10rpx;
        background: #E5F0FB;
        text-align: center;
        line-height: 48rpx;
        font-size: 24rpx;
        color: #2D9CDB;
      }

      .error {
        width: 104rpx;
        height: 48rpx;
        color: #979797;
        border-radius: 10rpx;
        background: #F2F2F6;
        font-size: 24rpx;
        line-height: 48rpx;
        text-align: center;
      }

      .ok {
        width: 104rpx;
        height: 48rpx;
        color: #DEAB48;
        border-radius: 10rpx;
        background: #FCF5E9E5;
        font-size: 24rpx;
        line-height: 48rpx;
        text-align: center;
      }
    }

    .u-slot-title {
      display: flex;
    }

    .u-cell-text {
      width: 208rpx;
      display: block;
    }

    ::v-deep .u-upload__button {
      display: none;
    }

    .button {
      display: flex;
      align-items: center;
      width: 750rpx;
      height: 213rpx;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      color: #686868;

      .xian {
        background: #FAFAFA;
        height: 18px;
        width: 1px;
      }

      view {
        flex: 1;
        text-align: center;

        &:nth-child(1) {
          color: #5591AF;
        }
      }
    }
  }
</style>
